<template>
  <div class="app-msg">
     <el-form class="m7-form" label-position="top" :rules="rules" :model="formData" size="mini" ref="formRef">
       <el-form-item prop="corpName">
          <div class="label">企业微信名称<span class="star">*</span>
          <el-tooltip class="item" effect="dark" content="查询路径：企业微信后台-我的企业-企业信息-企业ID" placement="right">
              <span class="V7_iconfont V7_iconV7tubiao_bangzhu-42"></span>
            </el-tooltip>
          </div>
          <el-input v-model="formData.corpName" :disabled="message.stat === 'auth' ? true : false" size="mini"></el-input>
        </el-form-item>
        <el-form-item prop="corpId">
          <div class="label">企业ID<span class="star">*</span>
            <el-tooltip class="item" effect="dark" content="查询路径：企业微信后台-我的企业-企业信息-企业ID" placement="right">
              <span class="V7_iconfont V7_iconV7tubiao_bangzhu-42"></span>
            </el-tooltip>
          </div>
          <el-input v-model="formData.corpId" size="mini" :disabled="message.stat === 'auth' ? true : false"></el-input>
        </el-form-item>
     </el-form>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop, Watch } from 'vue-property-decorator'
import { commonAction } from '@/utils/common'
// eslint-disable-next-line no-restricted-imports
import { cloneDeep } from 'lodash'
@Component({
  name: 'CompanyMsg',
  components: {
  }
})
export default class CompanyMsg extends Vue {
  private message = {
    accountId: '',
    corpName: '',
    corpId: ''
  }

  private formData = {
    accountId: '',
    corpName: '',
    corpId: ''
  }

  public rules = {
    corpName: [{ required: true, trigger: 'blur', message: '请输入企业微信名称' }],
    corpId: [{ required: true, trigger: 'blur', message: '请输入企业ID' }]
  };

  @Watch('message', { immediate: true })
  public messageChange (val) {
    this.formData = cloneDeep(val)
  }

  private $message: any;

  private getAuthInfo () {
    commonAction({
      url: '/server-public/action/wx-suite/auth-info',
      method: 'get'
    }).then(res => {
      if (res.success) {
        this.message = res.data
      }
    })
  }

  private mounted () {
    this.getAuthInfo()
  }

  public save () {
    const { accountId, corpName, corpId } = this.formData;
    (this.$refs as any).formRef.validate((valid) => {
      if (valid) {
        commonAction({
          url: '/server-public/action/wx-suite/auth-info',
          method: 'post',
          data: { accountId, corpName, corpId }
        }).then(res => {
          if (res.success) {
            this.$emit('next')
          }
        })
      } else {
        return false;
      }
    });
  }
}
</script>
<style lang="stylus" scoped>
.star {
  color: #FC6C5C;
  margin-left: 5px;
  margin-right: 8px;
}
.label {
  font-weight: 400;
  color: #303753;
  font-size: 12px
  display: flex;
  align-items: center;
}
.app-msg
  width: 400px
  margin: 24px auto 0px auto;
.V7_iconV7tubiao_bangzhu-42
  color: #B3B9C7
>>>.el-upload-dragger {
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
